<template>
  <div class="home">
    <HomeHeader />
    <HomeSwiper :list="swiperList" />
    <HomeIcons :list="iconList" />
    <HomeRecommend :list="recommendList" />
    <HomeWeekend :list="weekendList" />
  </div>
</template>

<script>
import HomeHeader from './components/Header';
import HomeSwiper from './components/Swiper';
import HomeIcons from './components/Icons';
import HomeRecommend from './components/Recommend';
import HomeWeekend from './components/Weekend';
import axios from 'axios';
import { mapState } from 'vuex';

export default {
  name: 'city',
  components: {
    HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend
  },
  data() {
    return {
      lastCity: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },
  computed: {
    ...mapState(['city'])
  },
  created() {
    this.init();
  },
  activated() {
    if(this.lastCity !== this.city) {
      this.init();
    }
  },
  methods: {
    init() {
      this.lastCity = this.city;
      axios.get('/api/index.json?city=' + this.city)
        .then(this.getHomeInfoSuccess);
    },
    getHomeInfoSuccess(res) {
      let result = res.data;

      if(result.ret && result.data) {
        let data = result.data;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
    }
  }
}
</script>
